<template>
    <div>
        <Dialog :show="dialogConfig.show" :title="dialogConfig.title" :buttons="dialogConfig.buttons" width="500px"
            :showCancel="false" @close="dialogConfig.show = false">

            <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent>
                <!--input输入-->
                <el-form-item label="新密码" prop="password">
                    <el-input placeholder="请输入密码" v-model.trim="formData.password" show-password size="large"
                        type="password">
                        <template #prefix>
                            <span class="iconfont icon-password"></span>
                        </template>
                    </el-input>
                </el-form-item>

                <!--input输入-->
                <el-form-item label="确认密码" prop="rePassword">
                    <el-input placeholder="请再次输入密码" v-model.trim="formData.rePassword" show-password size="large"
                        type="password">
                        <template #prefix>
                            <span class="iconfont icon-password"></span>
                        </template>
                    </el-input>
                </el-form-item>

            </el-form>
        </Dialog>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();

const api = {
    updatePassword: "updatePassword"
}
const checkRePassword = (rule, value, callback) => {
    if (value !== formData.value.rePassword) {
        callback(new Error(rule.message));
    } else {
        callback();
    }
};
const formData = ref({});
const formDataRef = ref();
const rules = {
    password: [
        { required: true, message: "请输入密码" },
        {
            validator: proxy.Verify.password,
            message: "密码只能是数字、字母、特殊字符8-18位",
        },
    ],
    rePassword: [
        { required: true, message: "请再次输入密码" },
        {
            validator: checkRePassword,
            message: "两次输入密码不一致",
        },
    ],
}

const show = () => {
    dialogConfig.value.show = true;
    nextTick(() => {
        formDataRef.value.resetFields();
        formData.value = {};
    })
}

defineExpose({ show });

const dialogConfig = ref({
    show: false,
    title: "修改密码",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitForm();
            },
        },
    ],
})

const submitForm = async () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        let result = await proxy.Request({
            url: api.updatePassword,
            params: {
                password: formData.value.password,
            }
        })

        if (!result) {
            return;
        }
        dialogConfig.value.show = false;
        proxy.Message.success("修改密码成功");
    })
}
</script>

<style lang="scss" scoped></style>
